<template>
  <div class="box">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- separator：表示分隔符 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>修改问题</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button style="float: right; padding: 3px 0" type="text"
          >操作按钮</el-button
        >
      </div>
      <div class="text item">
        <el-form
          :model="updateForm"
          :rules="rules"
          ref="updateForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- 编号 -->
          <el-form-item label="编号" prop="id">
            <el-input v-model="updateForm.id" readonly></el-input>
          </el-form-item>
          <!-- 姓名 -->
          <el-form-item label="姓名" prop="username">
            <el-input v-model="updateForm.username"></el-input>
          </el-form-item>
          <!-- 手机号 -->
          <el-form-item label="手机" prop="phone">
            <el-input v-model="updateForm.phone"></el-input>
          </el-form-item>
          <!-- 报告时间 -->
          <el-form-item label="报告时间" prop="inputtime">
            <!-- datatime组件 -->
            <el-date-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              size="large"
              v-model="updateForm.inputtime"
              type="datetime"
              placeholder="选择日期时间"
            ></el-date-picker>
          </el-form-item>
          <!-- 问题来源 -->
          <el-form-item label="问题来源" prop="source">
            <!-- 表单下拉列表控件 -->
            <el-select v-model="updateForm.source" placeholder="请选择">
              <!-- <el-option label="学生" value="学生"></el-option>
                <el-option label="网络" value="网络"></el-option>
                <el-option label="朋友" value="朋友"></el-option>
                <el-option label="校招" value="校招"></el-option>
                <el-option label="社会" value="社会"></el-option> -->
              <el-option
                v-for="item in kbsource"
                :key="item.id"
                :label="item.kbtypename"
                :value="item.kbtypename"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 问题描述 -->
          <el-form-item label="问题描述" prop="message">
            <!-- 多行文本框 -->
            <el-input
              type="textarea"
              :rows="5"
              placeholder="请输入问题描述信息"
              v-model="updateForm.message"
            ></el-input>
          </el-form-item>
          <!-- 按钮 -->
          <el-form-item>
            <el-button type="primary" @click="submitForm('updateForm')"
              >修改问题</el-button
            >
            <el-button @click="resetForm('updateForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- <p>source:{{ kbsource }}</p> -->
  </div>
</template>
<script>
// import axios from "axios";
// 导入修改问题接口
import request from "@/api/koubei.js";
export default {
  data() {
    return {
      // 记录进入修改页面上一个界面（List或者Query）
      gotoFlag:"",
      // 问题来源
      kbsource: [],
      // 关键点：前端向后台服务器发送的数据格式
      updateForm: {
        username: "",
        phone: "",
        inputtime: "",
        source: "",
        message: "",
      },
      // 添加验证规则：
      rules: {
        username: [
          //三个属性意思  required表示是否必须填写  message表示错误提示信息 trigger表示触发条件
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
          //用户名 3-12个可用字符
          {
            pattern: /^[a-zA-Z\u4e00-\u9fa5]{2,5}$/,
            message: "姓名为2-5字符",
            trigger: "blur",
          },
        ],
        phone: [
          //三个属性意思  required表示是否必须填写  message表示错误提示信息 trigger表示触发条件
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur",
          },
          //用户名 3-12个可用字符
          {
            pattern: /^1[3589]\d{9}$/,
            message: "无效手机号",
            trigger: "blur",
          },
        ],
        message: [
          //三个属性意思  required表示是否必须填写  message表示错误提示信息 trigger表示触发条件
          {
            required: true,
            message: "请输入问题描述信息",
            trigger: "blur",
          },
        ],
      },
    };
  },
  // data外面添加methods
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({
            message: "验证成功",
            type: "success",
          });
          // axios.post("http://localhost:8080/elemrg/koubei/add",this.updateForm)
          // .then((res) => {
          //   console.log(res);
          //   if(res.data.code===0){
          //     // 添加成功
          //     this.$message({
          //       message:"添加成功",
          //       type:"success",
          //       // 跳转展示页面
          //     });
          //   }else if(res.data.code===-1){
          //     // 添加失败
          //     this.$message.error("添加失败");
          //   }
          // })
          request
            .updatekb(this.updateForm)
            .then((res) => {
              console.log(res);
              if (res.data.code === 0) {
                // 修改成功
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                // 跳转展示页面
                if(this.gotoFlag=="query"){
                  // 跳回到查询问题界面
                  this.$router.push("/index/kb-query");
                }else if(this.gotoFlag=="list"){
                  // 跳回到问题列表界面
                  this.$router.push("/index/kb-list");
                }
              } else if (res.data.code === -1) {
                // 修改失败
                this.$message.error("修改失败");
              }
            })
            .catch((err) => {
              console.error(err);
            });
        } else {
          this.$message({
            message: "验证失败",
            type: "error",
          });
          return false;
        }
      });
    },
    resetForm(formName) {
      // this.$refs[formName].resetFields();
      // 修改的重置：还原回显数据
      this.showkbInfo();
    },
    // 回显单挑数据信息
    showkbInfo() {
      // 获取路由中传递的参数 路由对象：this.$route 路由管理对象：this.$router
      console.log("this.route---------------");
      console.log(this.$route);
      // // get方式传参接受方法，要求url
      // let id = this.$route.query.id;
      // restful风格
      // 1.需要在路由表中 配置路由 path:'kb-update/:id' 2.this.$route.params.id
      let id = this.$route.params.id;
      // 获取进入修改页面的标记
      this.gotoFlag = this.$route.params.flag;
      // 回显数据（例如显示第100条记录信息）
      request
        .getonekb(id)
        .then((r) => {
          console.log("以下是回显数据---------------");
          console.log(r);
          // 将服务器中查询的数据 ----> vue实例data中的updateForm
          this.updateForm = r.data;
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
  // 钩子函数
  created: function () {
    // 测试查询问题来源
    request
      .getkbSource()
      .then((r) => {
        console.log(r);
        // 将数据存入kbsource(实例对象中的)
        this.kbsource = r.data;
      })
      .catch((e) => {
        console.log(e);
      });
    // 调用回显方法
    this.showkbInfo();
  },
};
</script>
<style lang="scss">
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 220px;
  display: flex;
}
.el-select {
  display: flex;
  // postion:relative
  width: 220px;
}
.box {
  width: 100%;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
</style>
